<template>
  <div class="app-container">
    <!-- slice（0,3）索引 切片函数 -->
    <el-table
      style="width: 100% "
      :data="theses.slice((currpage - 1) * pagesize, currpage * pagesize)"
      border
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="name" label="老师" width="180" align="center" />

      <el-table-column prop="title" label="课程" align="center" />

      <el-table-column prop label="课程详细" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" align="center" @click="onViewDetails(scope.row.id)">查询</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="课程状态" width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success">选定中</el-tag>
          <el-tag v-else type="danger">已选定</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="students" label="已选学生" width="300" align="center">
        <template slot-scope="scope">
          <el-tag
            v-for="s in scope.row.students"
            :key="s.id"
            type="success"
            :label="s.name"
            :value="s.id"
            style="margin: 20px"
          >{{ s.name }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序列" width="50" align="center" />
    </el-table>

    <el-dialog :title="thesis.title" :visible.sync="dialogVisible">
      <span>{{ thesis.content || '' }}</span>
      <el-button slot="footer" type="primary" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>

    <el-pagination
      background
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      :total="theses.length"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { getTeacher, getTesisById } from '@/api/theses'
export default {
  data() {
    return {
      theses: [],
      thesis: {},
      dialogVisible: false,
      pagesize: 10, // 显示展示条数
      currpage: 1, // 默认显示第几页
      spanArr: [],
      pos: 0
    }
  },

  created(){
    this.getTea();
  },

  methods: {
    onViewDetails(id) {
      // 课程详情
      getTesisById(id).then(res => {
        this.thesis = res.data.data
        //.log(res.data.data)
      })
      // 点击事件
      this.dialogVisible = true
    },

    // 当前页数，支持 .sync 修饰符 	currentPage 改变时会触发
    handleCurrentChange(cpage) {
      this.currpage = cpage;
      this.getTea();
    },

    // 每页显示条目个数，支持 .sync 修饰符 pageSize 改变时会触发
    handleSizeChange(psize) {
      this.pagesize = psize;
      this.getTea();
    },

    getTea:function() {
    getTeacher(2020).then(res => {
      // //.log(res);
      this.theses = [];
      for (var i = 0; i < res.data.data.data.length; i++) {
        var ann = res.data.data.data[i]
        var arr = res.data.data.data[i].theses
        for (var j = 0; j < arr.length; j++) {
          var add = {
            id: arr[j].id,
            name: ann.name,
            phone: ann.phone,
            qq: ann.qq,
            title: arr[j].title,
            content: arr[j].content,
            status: arr[j].status,
            students: arr[j].students
          }
          this.theses.push(add)
        }
      };
      //.log(this.theses);
      this.getSpanArr(this.theses);
    })
  },

    getSpanArr(aaa) {
      this.spanArr=[];
      for (var i = 0; i < aaa.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (aaa[i].name === aaa[i - 1].name) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
      //.log(this.spanArr)
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 每次走到第3列时给单元格加上rowspan和colspan属性
        const _row = this.spanArr[rowIndex+(this.currpage-1)*this.pagesize] // 从处理完的数组里获取
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col // 相当于给给表格加上rowspan,colspan属性
        }
      }
    }
  }

}
</script>
<style lang="scss" scoped>
</style>

